<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星野今天赤什么</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
            background-color: #f5f5f5;
            height: 100vh;
            width: 100vw;
            box-sizing: border-box;
            margin: 0;
            display: flex;
            justify-content: center;
            /* 水平居中 */
            align-items: center;
            /* 垂直居中 */
            flex-direction: column;

        }

        .slot-machine {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin: 20px auto;
            position: relative;
        }

        .slot,
        .slot-share {
            position: relative;
            width: 135px;
            height: 60px;
            background: #fff;
            border: 2px solid #333;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        }

        .slot .reel,
        .slot-share .reel {
            position: absolute;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            will-change: transform;
        }

        .slot .reel div,
        .slot-share .reel div {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 15px;
            font-weight: bold;
            color: #333;
            background-color: #f0f0f0;
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
        }

        .pointer {
            position: absolute;
            width: 0;
            height: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 2;
        }

        .pointer-left {
            left: -30px;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            border-left: 15px solid red;
        }

        .pointer-right {
            right: -30px;
            border-top: 12px solid transparent;
            border-bottom: 12px solid transparent;
            border-right: 15px solid red;
        }

        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div class="notice">
        <h2>规则介绍</h2>
        <p>1.随机配装，珠子自选，抽到的装备没有标注伽马则只能在阿尔法和贝塔中自选</p>
        <p>2.随机范围是所有武器的最终派生（包括防卫队），以及所有M位的防具</p>
        <p>3.除衣装外，随机到的装备将会被移除，之后不会再次抽到</p>
        <p>4.如果一个格子随机到“？”，这个格子可以自选，“？”不会被移除</p>
        <p>5.目标是使用随机到的配装战胜黑龙，无规则并可以携带猫猫，但是不能使用壶爆弹</p>
    </div>
    <div class="main-box">
        <h2>星野今天赤什么</h2>
        <div class="slot-machine" id="slot-machine">
            <!-- 左侧指针 -->
            <div class="pointer pointer-left"></div>

            <!-- 滚动格子 -->
            <div class="slot">
                <div class="reel"></div>
            </div>
            <div class="slot">
                <div class="reel"></div>
            </div>
            <div class="slot">
                <div class="reel"></div>
            </div>
            <div class="slot">
                <div class="reel"></div>
            </div>
            <div class="slot">
                <div class="reel"></div>
            </div>
            <div class="slot">
                <div class="reel"></div>
            </div>
            <div class="slot">
                <div class="reel"></div>
            </div>
            <div class="slot-share">
                <div class="reel"></div>
            </div>
            <div class="slot-share">
                <div class="reel"></div>
            </div>

            <!-- 右侧指针 -->
            <div class="pointer pointer-right"></div>
        </div>
        <button onclick="startSlots()">开始</button>
    </div>

    <script src="pools/pool1.js"></script>
    <script src="pools/pool2.js"></script>
    <script src="pools/pool3.js"></script>
    <script src="pools/pool4.js"></script>
    <script src="pools/pool5.js"></script>
    <script src="pools/pool6.js"></script>
    <script src="pools/pool7.js"></script>
    <script src="pools/pool8.js"></script>
    <script>
        let slotPools = [pool1, pool2, pool3, pool4, pool5, pool6, pool7];
        let sharedPool = pool8;

        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                if(i!==0&&j!==0)
                [array[i], array[j]] = [array[j], array[i]];
            }
        }

        slotPools.forEach(item=>{
            item = shuffleArray(item)
        })

        sharedPool = shuffleArray(sharedPool)

        const slots = document.querySelectorAll('.slot');
        const slotShares = document.querySelectorAll('.slot-share');
        // 初始化每个格子
        slots.forEach((slot, index) => {
            const reel = slot.querySelector('.reel');
            const pool = slotPools[index];

            for (let i = 0; i < 50; i++) {
                pool.forEach(item => {
                    const div = document.createElement('div');
                    div.textContent = item;
                    reel.appendChild(div);
                });
            }

            // reel.style.transform = `translateY(-${reel.scrollHeight / 2}px)`;
        });

        slotShares.forEach((slot, index) => {
            const reel = slot.querySelector('.reel');
            const pool = pool8;

            for (let i = 0; i < 50; i++) {
                pool.forEach(item => {
                    const div = document.createElement('div');
                    div.textContent = item;
                    reel.appendChild(div);
                });
            }

            // reel.style.transform = `translateY(-${reel.scrollHeight / 2}px)`;
        });





        function startSlots() {
            slots.forEach((slot, index) => {
                const reel = slot.querySelector('.reel');
                const pool = slotPools[index];
                const poolHeight = pool.length * 60;

                // const middleOffset = -60 * Math.floor(pool.length / 2);
                reel.style.transition = 'none';
                reel.style.transform = `translateY(0px)`;

                setTimeout(() => {
                    // 快速滚动
                    const randomIndex = Math.floor(Math.random() * pool.length);
                    // const targetPosition = middleOffset - randomIndex * 60;
                    const targetPosition = -randomIndex * 60;
                    const scrollDistance = -poolHeight * 5 + targetPosition;

                    console.log(targetPosition, scrollDistance);

                    reel.style.transition = `transform ${3 + index * 0.25}s cubic-bezier(0.25, 1, 0.5, 1)`;
                    reel.style.transform = `translateY(${scrollDistance}px)`;

                    // setTimeout(() => {
                    //     reel.style.transition = 'none';
                    //     reel.style.transform = `translateY(${targetPosition}px)`;
                    // }, (3 + index * 0.25) * 1000);
                }, 0); // 所有格子同时开始滚动
            });

            let randomIndex = []
            randomIndex[0] = Math.floor(Math.random() * pool8.length);
            randomIndex[1] = Math.floor(Math.random() * pool8.length);
            while (randomIndex[1] == randomIndex[0] || (randomIndex[1] - randomIndex[0]) % pool8.length == 0) {
                randomIndex[1] = Math.floor(Math.random() * pool8.length);
            }

            slotShares.forEach((slot, index) => {
                const reel = slot.querySelector('.reel');
                const pool = pool8;
                const poolHeight = pool.length * 60;

                // const middleOffset = -60 * Math.floor(pool.length / 2);
                reel.style.transition = 'none';
                reel.style.transform = `translateY(0px)`;



                setTimeout(() => {
                    // 快速滚动
                    // const targetPosition = middleOffset - randomIndex[index] * 60;
                    const targetPosition = -randomIndex[index] * 60;
                    const scrollDistance = -poolHeight * 5 + targetPosition;

                    console.log(targetPosition, scrollDistance);

                    reel.style.transition = `transform ${4.75 + index * 0.25}s cubic-bezier(0.25, 1, 0.5, 1)`;
                    reel.style.transform = `translateY(${scrollDistance}px)`;

                    // setTimeout(() => {
                    //     reel.style.transition = 'none';
                    //     reel.style.transform = `translateY(${targetPosition}px)`;
                    // }, (4.75 + index * 0.25) * 1000);
                }, 0); // 所有格子同时开始滚动
            });


        }

    </script>
</body>

</html>